<template>
    <div class="page-container h-100">
       <div class="h-100 container">
           <div class="globalDiv h-100 leftNav">
               <ul class="menuList">
                   <li :class="{active:sbgllFlag}" @click="toLink('/sbgl')">
                       <i class="el-icon-setting"></i>
                       <!--设备管理-->
                       <span class="title">{{this.i18n.t('device management')}}</span>
                   </li>
                   <li :class="{active:!sbgllFlag}" @click="toLink('/sbsj')">
                       <i class="icon-upload iconfont-KUI"></i>
                       <!--设备升级-->
                       <span class="title">{{this.i18n.t('device upgrade')}}</span>
                   </li>
               </ul>
           </div>
           <div class="rightTable">
               <sbgl v-if="sbgllFlag"></sbgl>
               <sbsj v-if="!sbgllFlag"></sbsj>
           </div>
       </div>
    </div>
</template>
<script>
    //  设备管理组件
    import sbgl from './sbgl/index';
    //  设备升级组件
    import sbsj from './sbsj/index';
    export default {
        name: "sbgl_config",
        components: {
            sbgl,
            sbsj
        },
        watch: {

        },
        data(){
            return{
                routePath:'/sbgl',
                sbgllFlag:true
            }
        },
        methods:{
            toLink(url){
                if(url=='/sbgl'){
                    this.sbgllFlag=true
                }else{
                    this.sbgllFlag=false
                }
                // this.$router.replace(url)
            }
        },
        mounted(){
            // this.routePath=this.$route.path
        }
    }
</script>

<style lang='less' scoped>
    .globalDiv{
        border-radius: 4px;
        overflow: hidden;
    }
.menuList li{
    height: 45px;
    padding-left: 15px;
    box-sizing: border-box;
    &.active,&:hover{
        cursor: pointer;
        color: #fff;
        background: linear-gradient(270deg, rgba(33, 153, 190, 1) 0%, rgba(6, 98, 209, 1) 100%);
    }
    .title{
        line-height: 45px;
        margin-left: 15px;
    }
}
    .container{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        border: 0px solid green;
        .leftNav{
            width: 250px;
            display: inline-block;
            border: 0px solid red;
        }
        .rightTable{
            display: inline-block;
            border: 0px solid red;
            width: calc(100% - 270px)
        }
    }
</style>
